<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="./../template/MemberTemplate.xhtml">

    <ui:define name="contentInsert">

        <p:tabView effect="opacity" activeIndex="#{tabRecorderMB.tabIdx}" >
            <p:tab title="Search Reservations" >
                <h:form>
                    <h:panelGrid columns="3">
                        <p:autoComplete id ="reservationOutlet"
                                        value="#{reservationSearchManagedBean.stakeholderStr}" 
                                        completeMethod="#{reservationSearchManagedBean.completeStakeholderSelection}"
                                        var="s" itemLabel="#{s.toString()}"
                                        itemValue="#{s.toString()}"
                                        style="width:350px"
                                        immediate="true" required="true" />  
                        <p:watermark for="reservationOutlet" value="Enter restaurant name"/> 
                        <p:commandButton value="Search" update="resSearchOutletDataTableForm:outletDataTable"/>
                    </h:panelGrid>
                </h:form>
                <h:form id="resSearchOutletDataTableForm">
                    <p:dataTable id="outletDataTable" value="#{reservationSearchManagedBean.outletsByStakeholder}"
                                 var="anOutlet" emptyMessage="No outlets can be found">
                        <f:facet name="header">
                            Outlets
                        </f:facet>
                        <p:column headerText="Outlet">
                            #{anOutlet.getOutletName()}
                        </p:column>
                        <p:column headerText="Address">
                            #{anOutlet.getAddress()}
                        </p:column>
                        <p:column headerText="Phone Number">
                            #{anOutlet.getPhoneNumber()}
                        </p:column>
                        <p:column headerText="Reserve">
                            <p:commandButton value="Reserve a table"
                                             action="/member/tablereservation?faces-redirect=true"
                                             actionListener="#{fakeMainPortalMB.custEnterOutlet(anOutlet.getId())}"/>
                        </p:column>
                    </p:dataTable>
                </h:form>
            </p:tab> 
            <p:tab title="Search Meals">
                <p:tabView >

                    <p:tab title="Search by meal name">
                        <h:form>
                            <h:panelGrid columns="3" >
                                <p:inputText id="mealName" widgetVar="mealName"
                                             value="#{searchManagedBean.mealName}" 
                                             onselect="outletName" title="Enter a meal name" 
                                             required="true"/>
                                <p:watermark for="mealName" value="Enter meal name: "/>
                                <p:commandButton value="Search" update="resultDataTableForm:resultTable">
                                    <f:setPropertyActionListener target="#{tabRecorderMB.tabIdx}"
                                                                 value="1"/>
                                </p:commandButton>
                            </h:panelGrid>
                        </h:form>
                        <h:form id="resultDataTableForm">
                            <p:dataTable id="resultTable" 
                                         value="#{searchManagedBean.searchFoodItemsForSale()}" 
                                         var="itemByStakeholder"
                                         paginator="true" paginatorAlwaysVisible="false" page="15"
                                         emptyMessage="No similar item is found">
                                <p:column style="width:16px">  
                                    <p:rowToggler />  
                                </p:column>  
                                <p:column headerText="meal">
                                    <h:outputText value="#{itemByStakeholder.name}"/>
                                </p:column>
                                <p:column headerText="chain store">
                                    <h:outputText value="#{itemByStakeholder.stakeholderName}"/>
                                </p:column> 
                                <p:column headerText="path">
                                    <h:graphicImage value="#{itemByStakeholder.pathName}" width="100" height="100"/>
                                </p:column>
                                <p:column headerText="description">
                                    <h:outputText value="#{itemByStakeholder.outletItems.get(0).getDescription()}"/>
                                </p:column>

                                <p:rowExpansion>
                                    <p:dataGrid columns="2" value="#{itemByStakeholder.getOutletItems()}"
                                                var ="anItem" style="margin:400px" styleClass="ui-widget-content">
                                        <p:column>
                                            <h:outputText value="Seller: #{itemByStakeholder.stakeholderName} (
                                                          #{anItem.getOutletName()})"/><br/>
                                            <h:outputText value="Price: #{anItem.getPrice()}"/><br/>
                                            <h:outputText value="Type: #{anItem.getType()}"/><br/>
                                            <h:outputText value="Address: #{anItem.getAddress()}"/><br/>
                                            <h:outputText value="Phone number: #{anItem.getPhoneNumber()}"/><br/>
                                            <h:graphicImage value="#{anItem.getPathName()}"/><br/>

                                            <h:outputText value="Quantity"/><br/>
                                            <h:inputText value="#{FoodOrderManagerBean.singleItemQuantity}">
                                                <f:validateLongRange minimum="1"/> 
                                            </h:inputText>
                                            <br/>

                                            <!--Randall: Add to cart button here. NOTE: for searching by item, only one line item added at a time -->
                                            <p:commandButton id="addToCart-single" value="Add To Cart" 
                                                             action="#{FoodOrderManagerBean.addToCart_singleItem()}" oncomplete="dialogue_addedToCart.show();" >
                                                <f:setPropertyActionListener target="#{FoodOrderManagerBean.singleItem}"
                                                                             value="#{anItem}"/>
                                                <f:setPropertyActionListener target="#{tabRecorderMB.tabIdx}"
                                                                             value="1"/>
                                            </p:commandButton>

                                        </p:column>
                                    </p:dataGrid>
                                </p:rowExpansion>
                            </p:dataTable>
                        </h:form>
                    </p:tab>
                    <p:tab title="Search by outlet">
                        <h:form>
                            <h:panelGrid columns="3" >
                                <p:autoComplete id ="mealPurchaseOutlet"
                                                value="#{searchManagedBean.outletStr}" 
                                                completeMethod="#{searchManagedBean.completeOutletSelection}"
                                                var="out1" itemLabel="#{out1.toString()}"
                                                itemValue="#{out1.toString()}"
                                                style="width:450px" required="true"/>  
                                <p:watermark for="mealPurchaseOutlet" value="Enter outlet name: "/>
                                <p:commandButton value="Search" actionListener="#{searchManagedBean.updateOutletFood}"
                                                 update="mealTableForm:mealTable">
                                    <f:setPropertyActionListener target="#{tabRecorderMB.tabIdx}"
                                                                 value="1"/>
                                </p:commandButton>
                            </h:panelGrid> 
                        </h:form>

                        <br/>
                        <p:panel>
                            <h4 align="center">Available Food Items</h4>
                            <h:form id="mealTableForm">
                                <p:dataTable id="mealTable"
                                             value="#{FoodOrderManagerBean.NDFoodItemForSale}" var="o"
                                             styleClass="order-table"
                                             widgetVar="mealTable">
                                    <p:column headerText="path">
                                        <h:graphicImage value="#{o.pathName}" width="100" height="100"/>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">Name</f:facet>
                                        #{o.foodItemName}
                                    </p:column>
                                    <p:column> 
                                        <f:facet name="header">Price</f:facet>
                                        <h:outputText value="#{o.price}" >
                                            <f:convertNumber type="currency" />
                                        </h:outputText>
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">MealType</f:facet>
                                        #{o.type}
                                    </p:column>
                                    <p:column>
                                        <f:facet name="header">Quantity</f:facet>
                                        <h:inputText id="QtyNrmFoodItem" maxlength="3" size ="3" value="#{o.qty}"/>
                                    </p:column>
                                </p:dataTable>
                                <!--2-->
                                <!--/////////////////////////////////////////////////////////////////////////////////////////////////////-->
                                <!--Randall: Add to cart button here: -->
                                <p:commandButton id="addToCart-multiple" value="Add To Cart" 
                                                 action="#{FoodOrderManagerBean.addToCart_multipleItem()}" 
                                                 oncomplete="dialogue_addedToCart.show();" >
                                    <f:setPropertyActionListener target="#{tabRecorderMB.tabIdx}"
                                                                 value="1"/>
                                </p:commandButton>
                                <!--/////////////////////////////////////////////////////////////////////////////////////////////////////-->
                            </h:form>
                        </p:panel>
                    </p:tab>
                </p:tabView>

            </p:tab>
            <p:tab title="Group buy meals">
                <h:form>
                    <p:dataGrid var="gbItem" value="#{groupBuyCustManagedBean.availableItems}" columns="2"  
                                rows="12" paginator="true" effect="true"  
                                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                rowsPerPageTemplate="9,12,15">  

                        <p:column>  
                            <p:panel header="#{gbItem.name}" 
                                     style="text-align:center; background: #E5E5E5">  

                                <p:panel style="margin:0px; background: #E5E5E5; border: #F0F0F0; border-style: hidden">
                                    <p:graphicImage id="pic" value="./xiao long bao.jpg" height="100%" width="100%" />
                                </p:panel>
                                
                                <h:outputText value="#{gbItem.description}" />  
                                <hr/>
                                <h:panelGrid columns="2" width="100%" style="background: #E5E5E5; " >
                                    <p:commandButton value ="discover more about the deal"
                                                     action ="groupbuyingitempage2.xhtml?faces-redirect=true"
                                                     actionListener="#{groupBuyCustManagedBean.updateSelectedItem(gbItem)}"
                                                     immediate="true">  
                                        
                                        <f:setPropertyActionListener target="#{tabRecorderMB.tabIdx}"
                                                                     value="2"/>
                                    </p:commandButton>
                                    <h:outputText value="Discount: -#{groupBuyCustManagedBean.calculateDiscount(gbItem)}%"
                                                  style="text-align: right; font-size: large; font-weight: bold"/>
                                </h:panelGrid>

                            </p:panel>  

                        </p:column>  
                    </p:dataGrid>  
                </h:form>
            </p:tab>
        </p:tabView>

        <p:dialog header="Basic Dialog" widgetVar="dialogue_addedToCart">  
            <h:outputText value="Items Added to Cart" /><br/>  
            <h:form>
                <p:commandButton value="View Cart" action="./shoppingcart.xhtml?faces-redirect=true" oncomplete="dialogue_addedToCart.hide();" ajax="false" update ="subtotal"/>
                <p:commandButton value="Close"  oncomplete="dialogue_addedToCart.hide();" update ="subtotal"/>
            </h:form>
        </p:dialog>  
    </ui:define>
</ui:composition>
